import classnames from 'classnames'

import Icon from '@/component/icon'

import styles from './index.module.scss'
import { ArticlesItem } from '@/types/data'
import { useRef } from 'react'

import { fomatTime } from '@/utils/transtime'
import { useNavigate } from 'react-router-dom'
import { Image } from 'antd-mobile'
type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type: 0 | 1 | 3
  item: ArticlesItem
}

const ArticleItem = ({ type, item }: Props) => {
  const nowtime = useRef(Date.now())
  const nav = useNavigate()
  const goDetail = () => {
    nav(`/detail/${item.art_id}`)
  }
  return (
    <div className={styles.root} onClick={goDetail}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}>
        <h3>{item.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {item.cover.images.map((it) => (
              <div className="article-img-wrapper" key={it}>
                <Image
                  src={it}
                  lazy={true}
                  width={110}
                  height={75}
                  style={{ borderRadius: 4 }}
                  alt=""
                />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{item.aut_name}</span>
        <span>{item.comm_count} 评论</span>
        <span>{fomatTime(item.pubdate)} 前</span>
        <span className="close">
          <Icon iconName="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
